<template>
  <!-- eslint-disable vue/no-deprecated-html-element-is -->
  <header class="caption">
    <div class="btn-close" is="window-close-button">
      <IconWindowClose></IconWindowClose>
    </div>
    <div class="btn-maximize" is="window-maximize-button"></div>
    <div class="btn-minimize" is="window-minimize-button"></div>
    <div class="title">
      <img class="window-icon" src="@/../public/favicon.ico" alt="icon">
      <span>测试窗口</span>
    </div>
  </header>

  <RouterView />
</template>
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import IconWindowClose from '@/components/icons/IconWindowClose.vue'

</script>
<style lang="scss" scoped>
.caption {
  display: flex;
  flex-direction: row-reverse;
  height: 35px;
  width: 100%;
  background-color: #e0e8f6;

  .title {
    -webkit-app-region: drag;
    width: -webkit-fill-available;
    padding-left: 12px;
    align-content: center;

    .window-icon {
      position: relative;
      top: 2px;
      width: 14px;
      height: 14px;
    }

    span {
      margin-left: 5px;
      font-size: 14px;
      line-height: 14px;
    }
  }

  .btn-maximize,
  .btn-minimize,
  .btn-close {
    height: 35px;
    width: 55px;
    margin: 0;
  }

  .btn-minimize:hover {
    background-color: #dee2ef;
  }

  .btn-close {
    text-align: center;
    align-content: center;
  }

  .btn-close svg {
    position: relative;
    top: 2px;
  }

  .btn-close:hover {
    color: white;
    background-color: red;
  }

  .btn-minimize {
    background: url('@/assets/chrome-minimize.svg') center/auto 50% no-repeat;
  }

  .btn-maximize[window-status='Normal'] {
    background: url('@/assets/chrome-maximize.svg') center/auto 50% no-repeat;
  }

  .btn-maximize[window-status='Maximize'] {
    background: url('@/assets/chrome-restore.svg') center/auto 50% no-repeat;
  }

  .btn-maximize[window-status='Normal']:hover,
  .btn-maximize[window-status='Maximize']:hover {
    background-color: #dee2ef;
  }
}
</style>
